<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script type="text/javascript" src="./style.js"></script>
<!--  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="author" content="吕佳骏" />
  <meta name="email" content="11223344@gmail.com" />
  <meta name="profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template" content="重庆外卖" />
  <meta name="title" content="重庆外卖 - Organic Food HTML Template" />
  <meta name="keywords" content="重庆外卖, organic, food, shop, ecommerce, store, html, agriculture, vegetable, organic food, organic product, organic farm, organic life, organic shop, food store" />-->
  <title>CQWM - Login</title>
  <link rel="icon" href="images\favicon.png" />
  <link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="css/custom/main.css" />
  <link rel="stylesheet" href="css/custom/user-form.css" />



 </head>




<body>
  <section class="user-form-part">
   <div class="container">
    <div class="row justify-content-center">
     <div class="col-4 col-sm-10 col-md-8 col-lg-6 col-xl-5">     <!--div class="col-4 col-sm-10 col-md-8 col-lg-6 col-xl-5"-->
      <div class="user-form-logo">
       <a href="index.html"><img src="images/logo.png" alt="logo" /></a>
      </div>
      <div class="user-form-card">
       <div class="user-form-title">
        <h2>欢迎!</h2>
        <p>使用的您的“重庆外卖”账号进行登录</p>
       </div>
       <div class="user-form">
        <div class="form-group">
         <input type="text" id="zh" class="form-control" onblur="userBin()" placeholder="请输入您的手机号" />
        </div>
        <div id="userText">手机号格式为中国大陆手机号</div>
        <div class="form-group">
         <input type="password" id="mm" class="form-control" onblur="pwdBin()" placeholder="请输入您的密码" />
        </div>
        <div id="pwdText">密码由英文字母和数字组成的4-10位字符</div>
        <div align="center" id="slideBar"></div>
    <script type="text/javascript">     //滑块验证码
        var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){
                console.log("show");
                document.getElementById("btnSave").removeAttribute("disabled");//设置恢复点击
            },
            fail: function(){
            document.getElementById("btnSave").setAttribute("disabled", true);//设置不可点击
            }
        };
        SliderBar("slideBar", options);
    </script>

        <div class="form-button">
         <button type="submit" id="btnSave" onclick="myFunction()">登录</button>
            <script> document.getElementById("btnSave").setAttribute("disabled", true);//设置不可点击</script>
          <script language="JavaScript" type="text/javascript">
           function userBin(){
           var user=document.getElementById("zh").value;
		var userReg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;       <!-- 中国三大运营商手机格式-->
		var userText=document.getElementById("userText");
		if (user==""){userText.innerHTML="输入不能为空!";
		return false;}
		if(userReg.test(user)){
			userText.innerHTML="输入格式正确!";
			return true;
		}else{
			userText.innerHTML="输入格式不正确!";}
		return false;}


		function pwdBin(){
           var pwd=document.getElementById("mm").value;
		var pwdReg=/^[a-zA-Z0-9]{4,10}$/;
		var pwdText=document.getElementById("pwdText");
		if (pwd==""){pwdText.innerHTML="输入不能为空!";
		return false;}
		if(pwdReg.test(pwd)){
			pwdText.innerHTML="输入格式正确!";
			return true;
		}else{
			pwdText.innerHTML="输入格式不正确!";}
		return false;}



          function textFun(id) {
                   return document.getElementById(id).value;
                     }
               function myFunction() {
                   if(textFun("zh")=="19936074862" && textFun("mm")=="1234")   {alert("登录成功");
                   setTimeout('window.location.href="index.html?back url="+window.location.href',1000);}
                   else{alert("登录失败");}
                   }
        </script>
         <p>忘记密码?<a href="reset.html">点击这里</a></p>
         <p>商家登录<a href="loginbusiness.html">点击这里</a></p>
        </div>
       </div>
      </div>
      <div class="user-form-remind">
       <p>还未拥有账户?<a href="register.html">点击这里注册</a></p>
      </div>
      <div class="user-form-footer">
       <p>重庆外卖 | &copy; Copyright by <a href="#">吕佳骏</a></p>
      </div>
     </div>
    </div>
   </div>
  </section>
<!--  <script src="js/vendor/jquery-1.12.4.min.js"></script>
  <script src="js/vendor/popper.min.js"></script>
  <script src="js/vendor/bootstrap.min.js"></script>-->
 </body>
</html>